<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>北京科技报</title>
		<link href="css/common.css" rel="stylesheet">
		<link href="css/header.css" rel="stylesheet">
		<link href="css/video.css" rel="stylesheet">
		<link href="css/bookstarp.css" rel="stylesheet">
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="vue_det">
			<div class="header-box">
				<div class="header flex align-end">
					<div class="flex-one">
						<img class="header-logo" src="images/logoff.png" />
						<div class="font-12 color-ff">聚焦科学传播 弘扬科学精神</div>
					</div>
					<div class="header-search-btn">
						<img class="header-search" src="images/search.png" />
					</div>
				</div>
				<div class="position-relative">
					<div class="header-status-box">
						<div class="header-status">
							<div><a href="index.html">首页</a></div>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 2">
							<a class="flex align-center">
								<div>要闻</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 2}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 3">
							<a class="flex align-center">
								<div>解读</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 3}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 4">
							<a class="flex align-center">
								<div>科创</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 4}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 5">
							<a class="flex align-center">
								<div>科普</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 5}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status" v-on:click.stop="status_type = 6">
							<a class="flex align-center">
								<div>科教</div>
								<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 6}"
									src="images/down.png" />
							</a>
						</div>
						<div class="header-status">
							<div class="color-main">视频</div>
							<div class="header-line"></div>
						</div>
					</div>

					<!-- 下拉内容 -->
					<div class="header-content-box" v-if="status_type!=1">
						<div class="container">
							<div class="row">
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
								<div class="col-xs-4 col-sm-3">
									<div class="header-content"><a href="">科研成果</a></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box margin-top-120">
				<div class="flex">
					<div class="flex-one text-center position-relative" style="height: 34px;" v-on:click="list_type=1">
						<div class="font-16" :class="list_type==1?'text-bold':'text-9ca'">视频</div>
						<div class="header-line" v-if="list_type==1"></div>
					</div>
					<div class="flex-one text-center position-relative" style="height: 34px;" v-on:click="list_type=2">
						<div class="font-16" :class="list_type==2?'text-bold':'text-9ca'">合集</div>
						<div class="header-line" v-if="list_type==2"></div>
					</div>
				</div>
				<div class="container">
					<!-- 视频 -->
					<div v-show="list_type==1">
						<div id="containerone">
							<!-- 大图 -->
							<div>
								<a class="margin-top-14" href="">
									<div class="position-relative">
										<img class="ing-b-img" src="images/app.png" />
										<div class="play-btn">
											<img src="images/play.png" alt="" />
										</div>
									</div>
									<div class="font-18 text-cut-two margin-top-14">国际科创中心十年记 | 这些医药健康领域的新科技，就诞生在中关村
									</div>
								</a>
							</div>
							<!-- 小图 -->
							<div class="flex flex-wrap justify-between margin-top-24">
								<div class="margin-bottom-14" style="width: 48%;">
									<a href="">
										<div class="position-relative">
											<img class="content-sm-img" src="images/app.png" />
											<div class="play-btn">
												<img src="images/play.png" alt="" />
											</div>
										</div>
										<div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可
										</div>
									</a>
								</div>
								<div class="margin-bottom-14" style="width: 48%;">
									<a href="">
										<div class="position-relative">
											<img class="content-sm-img" src="images/app.png" />
											<div class="play-btn">
												<img src="images/play.png" alt="" />
											</div>
										</div>
										<div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可
										</div>
									</a>
								</div>
								<div class="margin-bottom-14" style="width: 48%;">
									<a href="">
										<div class="position-relative">
											<img class="content-sm-img" src="images/app.png" />
											<div class="play-btn">
												<img src="images/play.png" alt="" />
											</div>
										</div>
										<div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可
										</div>
									</a>
								</div>
							</div>
						</div>
						<div class="text-center font-14 margin-top-14" style="color: #9CA5AD;">{{isLoading?'加载中':'滑动加载更多'}}</div>
					</div>
					<!-- 合集 -->
					<div v-show="list_type==2">
						<div id="containerTwo" class="flex flex-wrap justify-between">
							<div class="margin-top-14" style="width: 48%;">
								<a href="">
									<div class="position-relative">
										<img class="content-sm-img" src="images/app.png" />
										<div class="content-sm-layer font-12 color-ff">21个视频</div>
									</div>
									<div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可</div>
								</a>
							</div>
							<div class="margin-top-14" style="width: 48%;">
								<a href="">
									<div class="position-relative">
										<img class="content-sm-img" src="images/app.png" />
										<div class="content-sm-layer font-12 color-ff">21个视频</div>
									</div>
									<div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可</div>
								</a>
							</div>
							<div class="margin-top-14" style="width: 48%;">
								<a href="">
									<div class="position-relative">
										<img class="content-sm-img" src="images/app.png" />
										<div class="content-sm-layer font-12 color-ff">21个视频</div>
									</div>
									<div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可</div>
								</a>
							</div>
						</div>
						<div class="text-center font-14 margin-top-14" style="color: #9CA5AD;">{{isLoading?'加载中':'滑动加载更多'}}</div>
					</div>
				</div>

				<div class="flex flex-column align-center justify-center" style="margin-top: 50px;">
					<img src="images/none.png" style="width: 268px;height: 198px;">
					<div class="font-16 margin-top-14" style="color: #9CA5AD;">暂无相关信息</div>
				</div>
			</div>
		</div>
	</body>
</html>

<script>
	var vm = new Vue({
		el: '#vue_det',
		data: {
			status_type: 1,
			list_type: 1,
			isLoading: false
		},
		mounted: function() {
			window.addEventListener('scroll', () => {
				const {
					scrollTop,
					scrollHeight,
					clientHeight
				} = document.documentElement;
				if (clientHeight + scrollTop >= scrollHeight && !this.isLoading) { // 5是个阈值，控制距离底部时加载
					this.loadMore();
				}
			});
		},
		methods: {
			loadMore: function() {
				this.isLoading = true;
				setTimeout(() => {
					if (this.list_type==1){
						// 获取容器元素
						var container = document.getElementById("containerOne");
						// 创建一个新的div元素
						var newDiv =
							'<div class="margin-top-14" style="width: 48%;"><a href=""><div class="position-relative"><img class="content-sm-img" src="images/app.png" /><div class="play-btn"><img src="images/play.png" alt="" /></div></div><div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可</div></a></div>';
						// 将新创建的div添加到容器的最后
						container.insertAdjacentHTML('beforeend', newDiv);
					} else {
						// 获取容器元素
						var container = document.getElementById("containerTwo");
						// 创建一个新的div元素
						var newDiv =
							'<div class="margin-top-14" style="width: 48%;"><a href=""><div class="position-relative"><img class="content-sm-img" src="images/app.png" /><div class="content-sm-layer font-12 color-ff">21个视频</div></div><div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可</div></a></div>';
						// 将新创建的div添加到容器的最后
						container.insertAdjacentHTML('beforeend', newDiv);
					}
					

					this.isLoading = false;
				}, 500); // 模拟异步加载数据
			}
		}
	})
</script>